<template>
	<view>
		<view style="text-align: center;">
			<image src="https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/xinsui.png" mode="widthFix" style="width: 140px;"></image>
			<view class="bg fb">解除关系后，空间数据将会消失</view>
		</view>
		<view class="flex a-t box" style="box-shadow:#ccc 8px 8px 40px;margin-top: 20px;padding: 10px 40px;">
			<view class="w33">
				<view style="width: 50px;height:50px;overflow: hidden;border-radius: 50%;">
					<!-- <canvas canvas-id="canvas" style="width: 50px; height:50px"></canvas> -->
					<image :src="vuex_user_content.my_avatar" style="width:50px" mode="widthFix"></image>
				</view>
			</view>
			
			<view style="width: 33%;text-align: center;">
				<view>
					<text class="b1">0</text>天
					<view>
						相处时间
					</view>
				</view>
			</view>
			<view class="w33 flex">
				<view style="width: 50px;height:50px;overflow: hidden;border-radius: 50%;margin-left: auto;">
					<!-- <canvas canvas-id="canvas2" style="width: 50px; height:50px"></canvas> -->
					<image :src="vuex_user_content.ta_avatar" style="width:50px" mode="widthFix"></image>
				</view>
			</view>
			
		</view>
		<view>
			<u-cell-group>
				
				<u-cell-item  title="你们在一起" arrow-direction="right">
					<!-- <u-icon slot="icon" size="32" name="search"></u-icon> -->
					{{vuex_user_content.anniversary_date}}天
				</u-cell-item>
				<u-cell-item  title="视频" arrow-direction="right">
					<!-- <u-icon slot="icon" size="32" name="search"></u-icon> -->
					{{vuex_user_content.album_count}}个
				</u-cell-item>
				<u-cell-item  title="想念对方" arrow-direction="right">
					<!-- <u-icon slot="icon" size="32" name="search"></u-icon> -->
					{{vuex_user_content.miss_ta}}次
				</u-cell-item>
			
			</u-cell-group>
		</view>
		<view class="box flex">
			<view class="bt1" @click="jiechu">
				确定解除
			</view>
			<view class="bt2" style="margin-left: auto;">
				考虑一下
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			uni.setNavigationBarColor({
			    frontColor: '#000000',  
			    backgroundColor: '#ffffff',    
			})
			
		},
		onReady() {
		},
		mounted() {
			
			
		},
		onShow() {
			console.log(this.vuex_user,this.vuex_user_content,'ddddddd')
			this.canvas('canvas',this.vuex_user_content.my_avatar)
			this.canvas('canvas2',this.vuex_user_content.ta_avatar)
			setTimeout(()=>{
				this.getimgdata('canvas')
				this.getimgdata('canvas2')
			},500)
		},
		methods: {
			canvas(name,img){
				var ctx = uni.createCanvasContext(name,this)
				// ctx.save()
				// ctx.beginPath()
				// ctx.arc(100, 100, 50, 0, 2 * Math.PI)
				// ctx.clip()
				ctx.drawImage(img,0,0,50,50)
				ctx.draw(true)
			},
			getimgdata(name){
				new Promise((r,n)=>{
					uni.canvasGetImageData({
					  canvasId: name,
					  x: 0,
					  y: 0,
					  width: 50,
					  height: 50,
					  success:(canvasData)=> {
						  console.log(canvasData.data)
							for(var i=0;i<canvasData.data.length;i+=4){
								var r=canvasData.data[i];//R - 红色
								var g=canvasData.data[i+1];//G - 绿色 (0-255)
								var b=canvasData.data[i+2];//B - 蓝色 (0-255)
								var gray = .299 * r + .587 * g + .114 * b;
								canvasData.data[i]=gray;//R - 红色
								canvasData.data[i+1]=gray;//G - 绿色 (0-255)
								canvasData.data[i+2]=gray;//B - 蓝色 (0-255)
								canvasData.data[i+3]=255;//A - alpha 通道
							}
							console.log(canvasData.data)
							this.putimgdata(name,canvasData.data)
					  }
					
				})
				})
			},
			putimgdata(name,arr){
				const data = new Uint8ClampedArray(arr)
				uni.canvasPutImageData({
				  canvasId:name,
				  x: 0,
				  y: 0,
				  width:50,
				  height:50,
				  data: data,
				  success:(res)=> {
					  console.log('成功')
				  }
				})
			},
			async jiechu(){
				let data={
					my_space_id:this.vuex_user_content.id
				}
				let res = await this.$u.api.my_space_delete(data)
				uni.switchTab({
					url:'/pages/content/content'
				})
			},
		}
	}
</script>

<style>
	page{
		background: #fff;
	}
.bt1{
	width: 120px;
	border-radius: 30px;
	text-align: center;
	background: #ccc;
	color: #fff;
	line-height: 40px;
}
.bt2{
	width: 120px;
	border-radius: 30px;
	text-align: center;
	background: rgb(241,158,194);
	color: #fff;
	line-height: 40px;
}
</style>
